<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6">
        <el-button type="primary" v-on:click="exportList">导出</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" v-on:click="getRisk">有感染风险者</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" v-on:click="getNoClockIn">未打卡用户</el-button>
      </el-col>
        <el-col :span="1">
          <el-button icon="el-icon-plus" @click="dialogFormVisible = true" circle></el-button>
          <el-dialog title="新建账号" :visible.sync="dialogFormVisible" width="40%">
            <span>是否创建账户</span>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addAccount">确 定</el-button>
            </div>
          </el-dialog>
        </el-col>
    </el-row>
    <el-table :data="StList">
      <el-table-column prop="id" label="用户Id">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.gender }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="college" label="学院">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.college }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="grade" label="班级">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.grade }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="身份">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="aclock" label="账号状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-show="scope.row.aclock == 1">已锁定</span>
          <span style="margin-left: 10px" v-show="scope.row.aclock == 0">正常</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleUnClock(scope.$index, scope.row)" v-show="scope.row.aclock == 1">解锁</el-button>
          <el-button
            size="mini"
            @click="handleClock(scope.$index, scope.row)" v-show="scope.row.aclock == 0">锁定</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

<script>
    export default {
        data() {
          return {
            StList: [],
            dialogFormVisible: false,
            formLabelWidth: '120px',
          };
        },
      created() {
        this.showList();
      },
      methods: {
        getRisk(){
          this.$axios.get('/st/riskList').then((response) => {
            this.StList = response.data
          }).catch((error) => {
            window.alert(error);
          });
        },
        getNoClockIn(){
          this.$axios.get('/st/NoClockInList')
            .then((response) => {this.StList = response.data})
            .catch((error) => {
              window.alert(error);
            });
        },
        showList(){
          // console.log("我进来了")
          this.$axios.get('/st/list')
            .then((response) => {this.StList = response.data})
            .catch(() => {
              this.$router.replace({path: '/'});
              location.reload();
            });
        },
        exportList(){
          window.location.href='http://localhost:8024/api/st/export'
        },
        addAccount(){
          this.dialogFormVisible = false;
          this.$axios.get('/st/addAcc').then((response) => {
            this.StList = response.data;
            window.alert("创建成功");
          })
            .catch((error) => {window.alert(error);});
        },
        handleUnClock(index, row) {
          this.$axios.get('/st/unclock',{
            params: {
              id: row.id,
            }
          }).then((response)=>{
            this.StList = response.data;
          }).catch((error)=>{
            window.alert(error);
          });
        },
        handleClock(index, row) {
          this.$axios.get('/st/doclock',{
            params: {
              id: row.id,
            }
          }).then((response)=>{
            this.StList = response.data;
          }).catch((error)=>{
            window.alert(error);
          });
        },
        handleDelete(index, row) {
          this.$axios.get('/st/delete',{
            params: {
              id: row.id,
            }
          }).then((response)=>{
            this.StList = response.data;
          }).catch((error)=>{
            window.alert(error);
          });
        }
      }
    }
</script>

